<template>
  <div class="top-bar flex-r-b">
      <div :class="['left',{goback:goback}]" @click='goBack'></div>
      <slot></slot>
      <div :class="['right',{clear:clear}]"><span v-if="clear" @click = 'removeAll'>清空</span></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    goback: {
      type: Boolean,
      default: true
    },
    clear: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    goBack(){
      if(!goback) return
      this.$routes.go(-1)
    },
    removeAll(){
      // true 显示确认框   ‘all' 删除所有
      this.$emit('removeAll',true,'all')
    }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
.top-bar {
  @include bottom-border-1px($c-ef);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  padding: 0 0.24rem;
  background: white;
  height: 0.8rem;
  color: $c-2a;
  font-size: 0.32rem;
  .left,
  .right {
    width: 1rem;
    font-size: 0.26rem;
    text-align: right;
  }
  .goback {
    height: 0.5rem;
    background: url("../../public/images/icon/icon_16.png") no-repeat;
    background-size: 0.16rem 0.32rem;
    background-position: left center;
  }
  .clear{
    text-align: right;
  }
}
</style>